<template>
  <div class="fileExplorer">
    <split-pane :min-percent="20" :default-percent="30" split="vertical">
      <template #paneL>
        <div class="fileList">
          <file-tree ref="fileTree" :id-config="idConfig" :storage-type="storageType" @addTab="addTab" />
        </div>
      </template>
      <template #paneR>
        <div id="rightMain" class="right-main" :class="{ rightPath }">
          <div v-if="rightPath" class="title">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(row, index) in rightPathList" :key="index">{{ row }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <svg-loading v-if="tableLoading" />
          <file-tips :binary-state="binaryState" :tabs-state="!rightPath" />
          <div v-if="componentType" class="content-container">
            <grid-table v-if="componentType === 'table'" ref="gridTable" />
            <code-editor v-else-if="componentType === 'code'" ref="codeEditor" />
            <el-image v-else-if="componentType === 'image'" :src="componentValue" fit="scale-down" />
            <iframe v-else-if="componentType === 'iframe'" id="re-iframe" class="iframe" :src="componentValue"
              width="100%" height="100%" frameborder="0" />
          </div>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch, provide } from "vue"
import FileTree from './fileTree.vue'
import CodeEditor from './CodeEditor.vue'
import GridTable from './gridTable.vue'
import SvgLoading from '../../components/svgLoading.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
import { debounce } from 'throttle-debounce'
import splitPane from 'vue-splitpane'
import FileTips from './fileTips.vue'
const props = defineProps({
  idConfig: {
    type: Object
  }
})
const tableLoading = ref(false)
const binaryState = ref(false)
const rightPath = ref('')
const componentType = ref('')
const componentValue = ref('')
const erd = ref(null)
const debounceFunc = ref()
const storageType = ref('')
const fileTree=ref(null)
const rightPathList = computed(() => {
  return rightPath.value.split('/')
})
onMounted(() => {
  debounceFunc.value = debounce(500, refreshCode)
  nextTick(() => {
    erd.value = elementResizeDetectorMaker() // 创建实例
    erd.value.listenTo(document.getElementById('rightMain'), (element) => {
      debounceFunc
    })
  })
})

 function init(storageType) {
      storageType.value = storageType
      fileTree.value.init()
    }
    function addTab(data, path) {
      rightPath.value = path
      tableLoading.value = true
      binaryState.value = false
      componentType.value = ''
      componentValue.value = ''
      let url = ''
      if (this.idConfig.workflowInfoId && this.idConfig.instanceId) {
        url = this.$api.getWorkflowInstancesStorages(this.idConfig.workflowInfoId, this.idConfig.instanceId, {
          path,
          is_dir: 0,
          operator_id: this.idConfig.operator_id,
          node_id: this.idConfig.node_id,
          storage_type: this.storageType
        })
      } else if (this.idConfig.experiment_id) {
        url = this.$api.getOperatorExperimentsStorages(this.idConfig.experiment_id, {
          path,
          is_dir: 0,
          storage_type: this.storageType
        })
      } else {
        this.tableLoading = false
        return
      }
      url.then(res => {
        if (this.idConfig.dataSetId) {
          this.componentType = 'table'
          this.$nextTick(() => {
            this.handleData(res.result)
            this.tableLoading = false
          })
        } else {
          if (res.result.can_preview) {
            if (res.result.content) {
              this.componentType = 'code'
              this.$nextTick(() => {
                this.$refs.codeEditor.init(res.result.content)
              })
            } else {
              this.componentType = 'iframe'
              this.componentValue = res.result.url
            }
          } else {
            this.binaryState = true
          }
          if (this.componentType === 'iframe') {
            this.$nextTick(() => {

              const iframe = document.getElementById('re-iframe')
              iframe.onload = function () {
                that.tableLoading = false
              }
            })
          } else {
            this.tableLoading = false
          }
        }
      }, res => {
        this.tableLoading = false
        this.binaryState = true
      })
    }
    function handleData(resData) {
      if (resData === '') {
        resData = { data: JSON.stringify({ data: [], schema: { fields: [] } }), total: 0 }
      }
      const parse = JSON.parse(resData.data)
      const tableData = []
      let fields = parse.schema.fields.map(row => row.name)
      const keyString = 'row'
      parse.data.forEach(dataRow => {
        const row = {}
        fields.forEach((keyRow, index) => {
          row[keyString + index] = dataRow[keyRow]
        })
        tableData.push(row)
      })
      fields = fields.map((row, index) => {
        return {
          title: row,
          field: keyString + index,
          minWidth: 100
        }
      })
      this.$refs.gridTable.init({
        resultColumn: fields,
        resultData: tableData
      })
    }
    function refreshCode() {
      if (this.componentType === 'code') {
        this.$refs.codeEditor.refresh()
      }
    }
</script>

<style lang="scss" scoped>
.fileExplorer {
  height: 100%;

  .fileList {
    height: 100%;
    padding-right: 8px;

    .fileTree {
      height: 100%;
      width: 100%;
      overflow: auto;

      ::v-deep .el-tree {
        display: inline-block;
        min-width: 100%;
      }
    }
  }

  .right-main {
    height: 100%;

    .title {
      padding: 6px;
    }

    .content-container {
      height: calc(100% - 28px);
      position: relative;

      .iframe {
        width: 100%;
        height: 100%;
      }
    }

    &.rightPath {
      .fileTips {
        height: calc(100% - 26px);
      }
    }
  }
}
</style>
